<template>
    <div>
         <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/order/transaction' }">订单管理</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/order/transaction' }">交易订单</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 搜索筛选 -->
        <el-form :inline="true" :model="order" class="user-search">  
            <!-- <el-form-item label="搜索：">
                <el-input size="small" v-model="order.names" placeholder="输入订单号"></el-input>
            </el-form-item>
            <el-form-item label="">
                <el-input size="small" v-model="order.num" placeholder="输入商品名称"></el-input>
            </el-form-item>
            <el-form-item label="交易类型">
                <el-select v-model="order.trading" placeholder="请选择交易类型">
                <el-option label="退款" value="-1"></el-option>
                <el-option label="消费" value="1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
                <el-button size="small" type="primary" icon="el-icon-plus" @click="addHandleEdit">添加</el-button>
            </el-form-item> -->
        </el-form>
       <!--列表-->
       <el-table
            :data="listData"
            style="width: 100%">
            <el-table-column type="expand">
            <template slot-scope="scope">
                <div class="goods_box">
                    <div class="goods_box_item" v-for="item in scope.row.list" :key="item.order_detail_id">
                        <el-form label-position="left"  class="demo-table-expand">
                       
                        <el-form-item label="商品名称">
                            <span>{{ item.goods_name }}</span>
                        </el-form-item>
                        <el-form-item label="数量">
                            <span>{{ item.goods_num }}</span>
                        </el-form-item>
                        <el-form-item label="单价">
                            <span>￥{{ item.goods_price }}</span>
                        </el-form-item>
                        <el-form-item label="小计">
                            <span>￥{{ item.goods_count }}</span>
                        </el-form-item>
                        
                        </el-form>
                    </div>
                    
                </div>
                
            </template>
                </el-table-column>
                <el-table-column
                label="订单编号"
                prop="order_serial_number" width="180px">
                </el-table-column>
                 <!-- <el-table-column
                label="店铺"
                prop="merchant_name">
                </el-table-column> -->
                  <el-table-column
                label="桌号"
                prop="table_no">
                </el-table-column>
                 
                
                <el-table-column
                label="下单时间"
                prop="create_time" width="260px" >
                </el-table-column>
                <el-table-column
                label="备注"
                prop="order_remark">
                </el-table-column>
                <el-table-column
                label="状态"
                prop="order_state_id">
                    <template slot-scope="scope">
                        <div>
                            <span v-for="i in stateList" :key="i.order_state_id">{{ i.order_state_id == scope.row.order_state_id ? i.order_state_name : '' }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作" min-width="200" fixed="right">
                <template slot-scope="scope">
                    <el-button size="mini" v-show="scope.row.order_state_id == 5" type="primary" plain @click="delivery(scope.$index, scope.row)">送达</el-button>
                    <!-- <el-button size="mini" type="danger" plain @click="handleEdit(scope.$index, scope.row)">退单</el-button> -->
                    <!-- <el-button size="mini" type="danger"  plain @click="deleteUser(scope.$index, scope.row)">删除</el-button> -->
                </template>
            </el-table-column>
        </el-table>
        <!-- <el-table size="small" :data="listData" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
            <el-table-column sortable prop="oderNo" label="订单号" width="150">
            </el-table-column>
             <el-table-column sortable prop="oderName" label="商品名称" width="150">
            </el-table-column>
            <el-table-column sortable prop="orderPrice" label="商品价格" width="100">
            </el-table-column>
            <el-table-column sortable prop="orderPriceNum" label="商品数量" width="100">
            </el-table-column>
            <el-table-column sortable prop="orderPayFun" label="支付方式" width="150">
            </el-table-column>
            <el-table-column sortable prop="orderPayMoneny" label="支付金额" width="100">
            </el-table-column>
            <el-table-column sortable prop="orderTransactionType" label="交易类型" width="100">
            </el-table-column>
            <el-table-column sortable prop="orderstatus" label="订单状态" width="100">
            </el-table-column>
            <el-table-column sortable prop="orderCreateTime" label="创建时间" width="150">
            </el-table-column>
            <el-table-column align="center" label="操作" min-width="100" >
                <template slot-scope="scope">
                    <el-button size="mini"  type="primary" plain  @click="handleClosePreview(scope.$index, scope.row)">预览</el-button>
                    <el-button size="mini" type="danger" plain @click="deleteUser(scope.$index, scope.row)">退款</el-button>
                </template>
            </el-table-column>
        </el-table> -->
         <!-- 分页  可以修改为组件-->
        <el-pagination class="page-box" 
            @size-change="handleSizeChange" 
            @current-change="handleCurrentChange" 
            background 
            :current-page="currentPage" 
            :page-size="pageSize"  
            :total="total">
        </el-pagination>
        <!-- 编辑界面 -->
        <!-- <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click="closeDialog">
            <el-form label-width="120px" :model="editForm"   ref="editForm">
                <el-form-item label="订单编号" prop="oderNo">
                    <el-input size="small" v-model="editForm.oderNo" auto-complete="off" placeholder="请输入订单编号"></el-input>
                </el-form-item>
                <el-form-item label="商品名称" prop="oderName">
                    <el-input size="small" v-model="editForm.oderName" auto-complete="off" placeholder="请输入商品名称"></el-input>
                </el-form-item>
                 <el-form-item label="商品价格" prop="orderPrice">
                    <el-input size="small" v-model="editForm.orderPrice" auto-complete="off" placeholder="请输入商品价格"></el-input>
                </el-form-item>
                 <el-form-item label="商品数量" prop="orderPriceNum">
                    <el-input size="small" v-model="editForm.orderPriceNum" auto-complete="off" placeholder="请输入商品数量"></el-input>
                </el-form-item>
                <el-form-item label="支付方式" prop="orderPayFun">
                    <el-select v-model="editForm.orderPayFun" placeholder="请选择支付方式">
                        <el-option label="微信" value="1"></el-option>
                        <el-option label="支付宝" value="2"></el-option>
                        <el-option label="云闪付" value="3"></el-option>
                        <el-option label="其他" value="4"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="交易类型" prop="orderTransactionType">
                    <el-select v-model="editForm.orderTransactionType" placeholder="请选择支付方式">
                        <el-option label="消费" value="消费"></el-option>
                        <el-option label="退款" value="退款"></el-option>
                    </el-select>
                </el-form-item>
                
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="closeDialog">取消</el-button>
                <el-button size="small" v-if="editForm.oderNo && editForm.oderName && editForm.orderPrice && editForm.orderPayFun" type="primary" :loading="loading" @click="submitForm('editForm')">保存</el-button>
                <el-button size="small" v-else type="primary"  class="title"  disabled>保存</el-button>
            </div>
        </el-dialog> -->


        <el-dialog 
            :title="orderTitle"
            :visible.sync="dialogVisible"
            width="50%"
            :before-close="handleClose">
            
            <el-descriptions title="订单信息" v-model="descriptions">
                <el-descriptions-item label="商品名称">{{ descriptions.oderName }}</el-descriptions-item>
                <el-descriptions-item label="商品价格">{{ descriptions.orderPrice }}</el-descriptions-item>  
                <el-descriptions-item label="商品数量">{{ descriptions.orderPriceNum }}</el-descriptions-item>
                <el-descriptions-item label="支付方式"><el-tag size="small">{{ descriptions.orderPayFun }}</el-tag></el-descriptions-item>
                <el-descriptions-item label="支付金额">{{ descriptions.orderPayMoneny }}</el-descriptions-item>
                <el-descriptions-item label="交易类型">{{ descriptions.orderTransactionType }}</el-descriptions-item>
                <el-descriptions-item label="订单状态">{{ descriptions.orderstatus }}</el-descriptions-item>
                <el-descriptions-item label="创建时间">{{ descriptions.orderCreateTime }}</el-descriptions-item>
            </el-descriptions>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose" type="primary" plain>关闭预览</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import axios from 'axios'; 
import { newStampChangeFormat, stampChangeFormat } from "./../../untils/index"
export default {
    // 默认子路由 不能有name属性
    name: "Transaction",
    data() {
        return {
            loading: false, //是显示加载,
            pageSize: 5,   //每页显示的数据条数
            currentPage: 1,  //当前页,
            total: 2,  //总页数
            editFormVisible: false, //控制编辑页面显示与隐藏
            dist: "", //区别唯一标识符  add 添加  del删除  edit编辑
            distNum: "",  //编辑的第几条数据
            order: {
                names: "", //订单号
                num: "",  //商品名称
                trading: ""  //状态类型
            },
            user_id: '',
            stateList: [],  //状态列表
            dialogVisible: false,  //预览dialog
            orderTitle: "",   //预览title
            listData: [ 
                {
                    // oderNo:8001  ,//订单号
                    // oderName: "商品名称1", //商品名称
                    // orderPrice: 0.1,   //商品价格
                    // orderPayFun: 1,    // 1-4支付方式
                    // orderPayMoneny: 0.1,  //支付金额
                    // orderTransactionType: "消费",  ///退款
                    // orderstatus: 1,      //订单状态1-6
                    // orderCreateTime: "创建时间1" 
                }
            ],
            editForm: {
                    oderNo:""  ,//订单号
                    oderName: "", //商品名称
                    orderPrice: "",   //商品价格
                    orderPayFun: "",    // 1-4支付方式
                    orderPriceNum: "",   //商品数量
                    orderPayMoneny: "",  //支付金额
                    orderTransactionType: "",  ///消费\退款
                    orderstatus: "",      //订单状态1-6
                    orderCreateTime: "" 
                },
            title: '添加',
            dataStore: [],  //存储旧的数据
            searchArr: [],
            descriptions: {} //描述列表
        }
    },
    methods: {
        delivery(index, row) {
            let norder_serial_numberum = row.order_serial_number;
            //送达  改变订单状态
            axios.put("/order/state/upd", {
                 data: {
                     order_serial_number: norder_serial_numberum,
                     order_state: 3
                 }
             }).then(res => {
                 if(res.data.data) {
                      this.$message({
                        showClose: true,
                        type: 'success',
                        message: '送达成功!'
                    })
                    this.getList();  
                 } else {
                     this.$message.error('操作失败');
                 }
             })
        },
        search() {
            //每次搜索前将旧的数据恢复
            // this.listData = this.dataStore;
            //根据商品代码或者商品名称检索 满足其中一个即可
            let oderNo = this.order.names;  //订单号
            let deptNum = this.order.num;   //商品名称
            let depType = this.order.trading; // -1 退款  1消费
            
            console.log(oderNo, deptNum, depType)
            if (oderNo == '' && deptNum == '' && depType == '' ) {
                 this.handleCurrentChange(1);
                 this.total = this.dataStore.length;
                 return;
            }
           
           let newArr = [];
            let reg = new RegExp(deptNum);
            // console.log(depType)
            this.dataStore.forEach((elem, index) => {
                // console.log("result" ,elem.orderTransactionType == ((depType == 1) ? "消费" : "退款") )  //elem.orderTransactionType == ((depType == 1) ? "消费" : "退款")
                if (deptNum == "") {  //名称为空
                    if (elem.oderNo == oderNo || elem.orderTransactionType == ((depType == 1) ? "消费" :((depType == -1)? "退款": "" ))) {
                        newArr.push(elem);
                    }
                } else  if ((elem.oderNo == oderNo || reg.test(elem.oderName) )|| elem.orderTransactionType == ((depType == 1) ? "消费" : ((depType == -1)? "退款": "" )) ){
                    newArr.push(elem);
                }
            })
            
            this.listData = newArr;
            this.total = newArr.length;
        },
        //add
        addHandleEdit() {
            //清空数据
            this.clearData();
            this.dist = "add";
            this.editFormVisible = true;
            

        },
        // 预览
        handleClosePreview(index, row) {
            this.dist = "edit";
            this.distNum = index;
            console.log('预览');
            this.dialogVisible = true;
            this.orderTitle = "订单号 : " + row.oderNo;
            
            this.descriptions = row;
            //数据渲染到dialog
            this.editForm.oderNo = row.oderNo;
            this.editForm.deptNo = row.deptNo;

        },
        //关闭预览
        handleClose(done) {
            this.dialogVisible = false;
        },
          // 修改
        handleEdit(index, row) {
            this.title = '修改';
            this.dist = "edit";
            this.editFormVisible = true;
            

            //数据渲染到dialog
            // this.editForm.goods_id = row.goods_id;
            // this.editForm.merchant_id =   row.merchant_id; 
            // this.editForm.goods_name =    row.goods_name;
            // this.editForm.goods_price =   row.goods_price;
            // this.editForm.goods_class_id =row.goods_class_id;
            // this.editForm.goods_detail =  row.goods_detail;
            

        },
        //删除
        deleteUser(index, row) {
            this.dist = "del"

             this.$confirm('此操作将删除该订单, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.delete('/goods/del', {
                        params : {
                            goods_id: row.goods_id
                        }
                    })
                        .then(res => {
                            console.log(res);
                           if(res.data.data) {
                                   this.$message({
                                        message: '删除成功',
                                        type: 'success'
                                    });
                                    this.getList();
                               } else {
                                   this.$message.error('删除失败');
                               }
                        })
                  
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                });


            
            // this.$message.error('您所要删除的商品不存在');
        },
        

        handleSizeChange(val) {
           this.pageSize = val 
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            let pageSize = this.pageSize;
            let da = this.dataStore;
            let i = (val - 1) * pageSize;
            let arr = da.slice(i , i + pageSize);
            this.listData = arr;
        },
        //提交保存
        submitForm(editData) {

                if (true) {
                   
                    console.log("submitForm", this.editForm)
                    this.dataStore.push({
                        oderNo: this.editForm.oderNo,  //订单编号
                        oderName: this.editForm.oderName,   //订单名称
                        orderPrice: this.editForm.orderPrice,  //商品价格
                        orderPriceNum: this.editForm.orderPriceNum,  //数量
                        orderPayMoneny: 0,                       //支付金额
                        orderPayFun: this.editForm.orderPayFun,  //支付方式
                        orderTransactionType: this.editForm.orderTransactionType,  //交易类型
                        orderCreateTime: "" + newStampChangeFormat(),
                        orderstatus: 1
                    })
                    
                    //清空内容
                    this.clearData();
                    
                    //关闭dialog
                    this.editFormVisible = false;
                    
               


                } else {
                    return false
                }
            
        },
        //关闭dialog
        closeDialog() {
            this.editFormVisible = false;
            //数据清空
            this.clearData();
           
        },
        //退款
        // deleteUser(index, row) {
        //     this.dist = "del"
        //     // console.log(index, row);
        //     this.$confirm('是否退款？该操作不可逆！', '提示', {
        //             confirmButtonText: '确定',
        //             cancelButtonText: '取消',
        //             type: 'warning'
        //         }).then(() => {
        //              //根据商品代码检索到对应数据remove  splice
        //             let flag = false;
        //             this.dataStore.forEach((element, i) => {
        //                 if (element.oderNo == row.oderNo) {
        //                     //找到商品
        //                     flag = true;
        //                     this.listData.splice(i, 1);
        //                     this.dataStore.splice(index, 1);
        //                     this.total -= 1;
        //                     this.handleCurrentChange(this.currentPage); 
        //                     this.$message({
        //                         message: '退款成功',
        //                         type: 'success'
        //                     });
        //                 } 
                        
                        
        //             })
        //         }).catch(() => {
        //             this.$message.error('已取消退款');
        //         })
           
           
        // },
        clearData() {
            this.editForm.oderNo = "";
            this.editForm.oderName = "";
            this.editForm.orderPrice = "";
            this.editForm.orderPayFun = "";
            this.editForm.orderTransactionType = "";
            this.editForm.orderPriceNum = "";
        },
        getList() {
            let getlocal = localStorage.getItem("localUser");
            this.user_id = JSON.parse(getlocal).user_id;
            axios.get("/order/list", {
                params: {
                    user_id: this.user_id
                }
            })
            .then(
                res => {
                    console.log(res);
                    
                    this.dataStore = res.data.data;
                    this.listData = res.data.data;
                    this.handleCurrentChange(1);
                    this.total = res.data.data.length;
                    // console.log(res.data.data)
                }
            )
        },
        getOrderState() {
            axios.get("/order/status")
                .then(
                    res => {
                        console.log(res.data.data);
                        this.stateList = res.data.data;
                    }
                )
        }
        
    },
    created() {
        this.getList();
        this.getOrderState();    
    }
}
</script>

<style scoped>
.el-form {
    margin: 0;
    padding: 0;
    text-align: left;
}
.el-pagination {
    margin-top: 20px;
}
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}

.demo-table-expand {
    
    padding-left: 50px;
    font-size: 0;
  }
  .demo-table-expand label {
     
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
  .el-table__expanded-cell {
      padding-left: 20px;
  }
  .goods_box {
      width: 100%;
      display: flex;
  }

  .goods_box_item {
      width: 33%;
  }
</style>